<template>
  <div class="orderList">
    <header>
      <div class="top">
        <span>订单管理</span>
      </div>
      <div class="tab">
        <router-link v-for="(x,y) in tab" :to="x.page" tag="div" class="tab_box" :key="y" replace>
          <p :class="x.page != present?'selected':''">{{x.text}}</p>
          <transition name="el-zoom-in-center">
            <p v-show="x.page == present"></p>
          </transition>
        </router-link>
      </div>
    </header>
    <div class="print">
      <div class="status">打印机已连接</div>
      <div class="switch">
        <span v-if="printVal">自动打印</span>
        <span v-else>手动打印</span>
        <van-switch v-model="checked" active-color="#FB4448" @change="print" />
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Switch,Icon,Dialog,Picker } from 'vant';

  export default {
      name: "orderList",
      data() {
        return {
          tab: [
            {text: '新订单', page: '/components/BusinessComponents/order/new'},
            {text: '待配送', page: '/components/BusinessComponents/order/wait'},
            {text: '配送中', page: '/components/BusinessComponents/order/ing'},
            {text: '已完成', page: '/components/BusinessComponents/order/complete'},
            {text: '退款/售后', page: '/components/BusinessComponents/order/service'}
          ],
          checked: true,
          present: '/components/BusinessComponents/order/new',
          printVal:true
        }
      },
    methods: {
      back() {
        this.$router.back();
      },
      print(value){
        if(value){
          this.printVal = true
        }else{
          this.printVal = false
        }
      }
    },
    mounted() {
      this.present = this.$route.path;
    },
    watch: {
      $route(to, from) {
        this.present = to.path;
      }
    }
  }
</script>

<style scoped>
  .orderList{
    background: #F5F5F5;
    min-height: 5.7rem;
    padding-top: .96rem;
  }

  header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 88;
    flex-flow: row;
    box-sizing: border-box;
  }
  header .top{
    height: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);
    padding: 0 .1rem;
  }
  header > div > img {
    width: .11rem;
    height: .18rem;
  }

  header > div > span {
    font-size: .18rem;
    font-weight: 500;
    color: #ffffff;
    flex-grow: 1;
    text-align: center;
  }

  /* 拼团分类部分 */
  .tab {
    width: 100%;
    height: 100%;
    max-height: .45rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    /*align-items: center;*/
    background-color: #ffffff;
  }

  .tab_box {
    height: 100%;
    max-height: .55rem;
    padding: 0 .1rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    /*align-items: center;*/
    box-sizing: border-box;
    text-align: center;
  }

  .tab_box > p:nth-child(1) {
    color: #FB4448;
    font-size: .16rem;
    line-height: .16rem;
    padding: .15rem 0 .13rem;
  }

  .tab_box > p:nth-child(2) {
    width: 100%;
    height: .02rem;
    background-color: #FF300D;
    border-radius: .01rem;
  }


  .el-loading-spinner {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    min-height: 5rem;
  }

  .selected {
    color: #333333 !important;
    font-size: .16rem !important;
  }

  .print{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .13rem;
  }
  .switch{
    display: flex;
    align-items: center;
  }
  .switch span{
    margin-right: .14rem;
    color: #999999;
    font-size: .15rem;
  }
  >>>.van-switch{
    font-size: .2rem;
  }
</style>
